<template>
    <div class="login">
        <div>
            <img src="../assets/haizeiwang.jpg" width="20%">
        </div>
    <el-form ref='AccountFrom' 
    :model='account' 
    :rules='rules'  label-width="0px"
    label-position="left" class="demo1-ruleForm"
    > 
    <h3 class="title">登录系统首页</h3>
    <el-form-item prop="username">
        <el-input type="text" 
            v-model="account.username" 
            auto-complete="off"
            placeholder="请输入账号"
        />
    </el-form-item>
    <el-form-item prop="pwd">
        <el-input type="password" 
            v-model="account.pwd" 
            auto-complete="off"
            placeholder="请输入密码"
        />
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent='handleLogin' :loading="logining">登录</el-button>
    </el-form-item>
    </el-form>
    <div class="footer">
        <a href="https://beian.miit.gov.cn">赣ICP备2021005870号</a>
    </div>
    </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return{
            logining: false,
            account: {
                username: '',
                pwd: ''
            },
            rules: {
                username: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                }],
                pwd: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }]
            },
            checked: true
        }
    },
    methods: {
        handleLogin(){
            this.$refs.AccountFrom.validate((valid)=>{
                if(valid){
                    //验证通过 可以提交
                    this.logining = true;
                    //将提交的数据封装
                    var loginParams = {username: this.account.username, password: this.account.pwd}
                    this.axios.post("user/login",this.$qs.stringify(loginParams)).then(res=>{
                        this.logining = false;
                        console.log(res)
                        if(res.data.code===200){
                            localStorage.setItem('access-token',JSON.stringify(res.data.data.username));
                            localStorage.setItem('access-id',JSON.stringify(res.data.data.id));
                            // sessionStorage.setItem('atoken',res.data.data.id);
                            // console.log(window.sessionStorage.getItem('atoken'));
                            this.$router.push("/user/home");
                        }else{
                            this.$message({
                                message: res.data.message,
                                type:'error'
                            });
                        }
                    })
                }else{
                    console.log('error submit');
                    return false;
                }
            });
        }
    }
}
</script>
<style>
    body{
        background:#DFE9FB;
    }
    .demo1-ruleForm{
         width: 25%;
         margin-left: 37%;
    }
 .login {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.footer{
    width: 100%;
    position: fixed;
    bottom: 50px;
}
a{
    color: #38f;
    text-decoration: none;
    cursor: pointer;
}
</style>